import { defineComponent, ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { Row, Col, Spin, Image, Progress } from "ant-design-vue";
import { course } from "@/api";
import { useSystemStore } from "@/stores";
import { Empty } from "@/components";
import mediaIcon from "@/assets/images/commen/icon-medal.png";
import defaultThumb1 from "@/assets/thumb/thumb1.png";
import defaultThumb2 from "@/assets/thumb/thumb2.png";
import defaultThumb3 from "@/assets/thumb/thumb3.png";
import styles from "./latest-learn/index.module.scss";

type LastLearnModel = {
  [key: number]: LearnModel;
};

type LearnModel = {
  course: LastCourseModel;
  hour_record: HourRecordModel;
  last_learn_hour: LastHourModel;
  record: CourseRecordModel;
};

type LastCourseModel = {
  charge?: number;
  class_hour: number;
  created_at?: string;
  id: number;
  is_required: number;
  is_show?: number;
  short_desc: string;
  thumb: string;
  title: string;
};

type LastHourModel = {
  chapter_id: number;
  course_id: number;
  duration: number;
  id: number;
  rid: number;
  sort: number;
  title: string;
  type: string;
};

export default defineComponent({
  name: "LatestLearnPage",
  setup() {
    const router = useRouter();
    const systemStore = useSystemStore();

    document.title = "最近学习";

    const loading = ref<boolean>(false);
    const courses = ref<LastLearnModel[]>([]);
    const resourceUrl = ref<ResourceUrlModel>({});

    const systemConfig = computed(() => systemStore);

    onMounted(() => {
      getCourses();
    });

    const getCourses = () => {
      loading.value = true;
      course.latestLearn().then((res: any) => {
        if (res.data.resource_url && res.data.user_latest_learns) {
          resourceUrl.value = res.data.resource_url;
          courses.value = res.data.user_latest_learns;
        }
        loading.value = false;
      });
    };

    const getThumbSrc = (thumb: number) => {
      if (thumb === -1) return defaultThumb1;
      if (thumb === -2) return defaultThumb2;
      if (thumb === -3) return defaultThumb3;
      return resourceUrl.value[thumb];
    };

    const goToCourse = (courseId: number) => {
      router.push(`/course/${courseId}`);
    };

    return () => (
      <div class="main-body">
        <div class={styles["content"]}>
          {loading.value && (
            <Row style={{ width: 1200 }}>
              <div class="float-left d-j-flex mt-50">
                <Spin size="large" />
              </div>
            </Row>
          )}
          {!loading.value && courses.value.length === 0 && (
            <Row style={{ width: 1200 }}>
              <Col span={24}>
                <Empty />
              </Col>
            </Row>
          )}
          {!loading.value &&
            courses.value.length > 0 &&
            courses.value.map((item: any, index: number) => (
              <div key={index}>
                {item.course && (
                  <div
                    class={styles["item"]}
                    onClick={() => {
                      goToCourse(item.course.id);
                    }}
                  >
                    <div style={{ width: 120 }}>
                      <Image src={getThumbSrc(item.course.thumb)} width={120} height={90} style={{ borderRadius: 10 }} preview={false} />
                    </div>
                    <div class={styles["item-info"]}>
                      <div class={styles["top"]}>
                        {item.course.is_required === 1 && <div class={styles["type"]}>必修课</div>}
                        {item.course.is_required === 0 && <div class={styles["active-type"]}>选修课</div>}
                        <div class={styles["title"]}>{item.course.title}</div>
                      </div>
                      {item.record && (
                        <>
                          {item.last_learn_hour && <div class={styles["record"]}>上次学到：{item.last_learn_hour.title}</div>}
                          <div class={styles["progress"]}>
                            {item.record.progress < 10000 && <Progress percent={Math.floor(item.record.progress / 100)} strokeColor="#FF4D4F" trailColor="#F6F6F6" />}
                            {item.record.progress >= 10000 && (
                              <>
                                <Image width={24} height={24} src={mediaIcon} preview={false} />
                                <span class={styles["tip"]}>恭喜你学完此课程!</span>
                              </>
                            )}
                          </div>
                        </>
                      )}
                      {!item.record && (
                        <>
                          {item.last_learn_hour && <div class={styles["record"]}>上次学到：{item.last_learn_hour.title}</div>}
                          <div class={styles["progress"]}>
                            <Progress percent={1} strokeColor="#FF4D4F" trailColor="#F6F6F6" />
                          </div>
                        </>
                      )}
                    </div>
                  </div>
                )}
              </div>
            ))}
        </div>
        <div class={styles["extra"]}>{systemConfig.value?.pcIndexFooterMsg || ""}</div>
      </div>
    );
  },
});
